<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 
    <script type="text/javascript" src="js/lib/jquery.min.js"></script>
    <link rel="stylesheet" href="fonts/iconfont.css">
    <link href="css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="css/bootstrap.css"/>
    <link rel="stylesheet/less" type="text/css" href="css/xStyle.less"/>
    <script type="text/javascript" src="js/lib/less.js"></script>
    <style>
        h1 {
            margin: 2rem;
        }
    </style>
</head>

<body>
<div>

    <div>
        <div>
            <div id='div1'></div>
        </div>
        <div>
            <div id="json1">

            </div>
        </div>
    </div>

    <div>
        <div>
            <div id='div2'></div>
        </div>
        <div>
            <div id="json2">

            </div>
        </div>
    </div>

</div>
</body>
<script type="module">
    import xPanel from './js/src/xPanel.js';
    
    import {regionsForSelect, citysForRadio, china, regionsForMSelect} from './js/data/panel.js'

    let obj1 = {
        date: '2022-03-11 08:01:10',
        checkbox:'430100',
        radio: '430200'
    };

    let binds1 = [{
        type: 'input',
        key: 'checkbox',
        tag: '基本信息',
        cfg: {
            type: 'checkbox',
            placeholder: '请选择城市(多选)',
            data: citysForRadio,
            mandatory: true
        },
        label: '城市'
    },
        {
            type: 'input',
            key: 'radio',
            cfg: {
                type: 'radio',
                data: citysForRadio,
                mandatory: true
            },
            label: '城市',
            tag: '基本信息'
        },


        {
            type: 'mSelect',
            tag: '基本信息',
            key: 'mSelect',
            cfg: {
                cols: 3,
                tag: true,
                placeholder: '多选',
                data: regionsForMSelect,
                mandatory: true
            },
            label: '区域',

        },
        {
            type: 'xSelect',
            tag: '基本信息',
            key: 'xSelect',
            cfg: {
                placeholder: '支持输入过滤包括pinyin',
                data: regionsForSelect,
                mandatory: true
            },
            label: '区域选择'
        },

        {
            type: 'xCascade',
            tag: '基本信息',
            key: 'cascade',
            cfg: {

                tab: ['省', '市', '区'],
                placeholder: '请选择区域',
                data: china,
                mandatory: true
            },
            label: '区域'
        },


        {
            type: 'zInput',
            key: 'zInput',
            tag: '其他信息',
            cfg: {
                key: 'phone',
                mandatory: true
            },
            label: '电话'
        },

        {
            type: 'input',
            key: 'rate',
            tag: '其他信息',
            cfg: {
                type: 'rate',
                mandatory: true,
                half: true
            },
            label: '评分'
        },

        {
            type: 'input',
            tag: '其他信息',
            key: 'xswitch',
            cfg: {
                type: 'switch',
                data: '关闭,开启',
                mandatory: true
            },
            label: '日志'
        },

        {
            type: 'input',
            key: 'color',
            tag: '其他信息',
            cfg: {
                type: 'color',

                mandatory: true
            },
            label: '颜色'
        },

        {
            type: 'input',
            key: 'range',
            tag: '其他信息',
            cfg: {
                type: 'range',
                mandatory: true
            },
            label: '范围'
        },

        {
            type: 'xDatePicker',
            key: 'date',
            tag: '其他信息',
            cfg: {
                type: 'datetime',
                placeholder: '请选择日期',
                mandatory: true
            },
            label: '日期'
        },

        {
            type: 'xUpload',
            key: 'img',
            tag: '附加信息',
            col: 'col-md-12', /*独占一行*/
            cfg: {
                url: 'http://127.0.0.1/upload',
                path: "http://127.0.0.1:8020/x-ui/img/upload",
                size: 4, /*0 是无限制*/
                cols: 4,
                type: "img",
                accept: "image/*",
                placeholder: '请上传图片',
                mandatory: true
            },
            label: '图片'
        },

        {
            type: 'xUpload',
            key: 'file',
            tag: '附加信息',
            col: 'col-md-12', /*独占一行*/
            cfg: {
                url: 'http://127.0.0.1/upload',
                path: "http://127.0.0.1:8020/x-ui/img/upload",
                size: 2, /*0 是无限制*/
                style: 'upload-file',
                type: "file",

                placeholder: '请上传文件',
                mandatory: true
            },
            label: '文件'
        },


        {
            col: 'col-md-12', /*独占一行*/
            type: 'xTextarea',
            key: 'textarea',
            tag: '附加信息',
            cfg: {
                placeholder: '请输入备注',
                rows: 8
            },
            label: '备注'
        }
    ]


    new xPanel({
        el: "div1",
        binds: binds1,
        col: 'col-md-6',
        grid: 'container',
        obj: obj1,
        tag: true
    }).init();

    new xPanel({
        el: "div2",
        style: "panel-v",
        binds: binds1,
        col: 'col-md-6',
        grid: 'container',
        obj: {},
        tag: true,
        title: '标签在上，控件在下'
    }).init();

</script>

</html>